<!-- CounterCard.vue -->
<template>
  <div class="a title-colco" @click="$emit('click')" :style="{ 'background-color': bgColor }">
    <div class="number_font">
      <span class="number_font" v-html="formattedNumber"></span> <!-- 显示格式化后的数字 -->
    </div>
    <div :style="{ 'color': color }">{{ label }}</div>
  </div>
</template>

<script>
  import '@/assets/font/stylesheet.css';
export default {
  props: {
    count: Number,
    label: String,
    color: String, // 用于实际数字
    bgColor: {
      type: String,
      default: "#0C2136"
    }
  },
  computed: {
    formattedNumber() {
      const paddedNumber = this.count.toString().padStart(6, '0'); // 确保6位数字
      const leadingZeros = paddedNumber.match(/^[0]+/g); // 提取前导零
      const nonZeroPart = paddedNumber.slice(leadingZeros ? leadingZeros[0].length : 0); // 剩余部分

      const leadingZerosHTML = leadingZeros ? `<span style="color: ${this.color}; opacity: 0.6;">${leadingZeros[0]}</span>` : ""; // 前导零 HTML
      const nonZeroPartHTML = `<span style="color: ${this.color};">${nonZeroPart}</span>`; // 非零部分 HTML

      return leadingZerosHTML + nonZeroPartHTML; // 合并返回
    },
  },
  mounted() {

  }
};
</script>

<style scoped>
.a {
  height: 110px;
  width: 18%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* 垂直排列 */
  /* background-color: #0C2136; */
  border-radius: 5px;
}

.title-colco {
  color: #29AEDE;
  font-size: 20px;
}

.a:hover {
  color: #fff;
}
</style>
